<template>
	<div class="video_clip_source">
		<div class="listbox">
			<div class="list" v-infinite-scroll="handleScrollLoad" infinite-scroll-disabled="disabled">
				<slot :list="videoList"></slot>
			</div>
			<div class="loading" v-if="loading">
				<i class="el-icon-loading"></i>
				<p>加载中...</p>
			</div>
			<div class="nomore" v-if="noMore">没有更多了</div>
		</div>
	</div>
</template>

<script>
import { getAttachList } from '@/api/global';
export default {
	data() {
		return {
			loading: false,
			queryData: { page: 1, limit: 14 },
			dataCount: 0,
			videoList: []
		};
	},
	computed: {
		noMore() {
			return this.dataCount <= this.videoList.length;
		},
		disabled() {
			return this.loading || this.noMore;
		},
		isCanCheck() {
			return this.isMerge || this.isDelete;
		}
	},
	mounted() {
		this.queryAttachList();
	},
	methods: {
		//获取附件列表
		async getAttachList() {
			let params = { ...this.queryData, operDel: 1, type: 6 };
			let result = await getAttachList(params).then((res) => res.data);
			this.isFirst = false;
			this.loading = false;
			if (result.code === '0') {
				let datas = result.data || [];
				this.dataCount = parseInt(result.count);
				this.videoList = [...this.videoList, ...datas];
			}
		},

		//查询资源列表
		queryAttachList() {
			this.loading = true;
			this.getAttachList();
		},

		//滚动加载数据
		handleScrollLoad() {
			let page = this.queryData.page;
			let limit = this.queryData.limit;
			if (page * limit < this.dataCount) {
				this.queryData.page++;
				this.queryAttachList();
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.video_clip_source::v-deep {
	display: flex;
	flex-direction: column;
	width: 290px;
	flex-shrink: 0;
	.listbox {
		flex: 1;
		overflow: hidden;
		overflow-y: auto;
		padding-bottom: 10px;
	}
	.list {
		overflow: hidden;
	}
	.loading,
	.nomore {
		clear: both;
		padding: 5px;
		line-height: 1;
		margin-top: 10px;
	}
	.loading {
		display: flex;
		align-items: center;
		justify-content: center;
		p {
			color: #606266;
			margin-left: 6px;
		}
	}
	.nomore {
		text-align: center;
		color: #606266;
	}
}
</style>
